<?php
?>

<div class="panel panel-default">
    <div class="panel-body">
        <div class="form-inline">
            <div class="btn-group col-lg-2">
                <a class="btn btn-default " type="button" data-toggle="modal" href="#addModal"><i class="fa fa-plus"></i> 新增角色</a>
            </div>
        </div>
    </div>
</div>

<div class="panel">
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-condensed">
                <thead class="nowrap">
                <tr>
                    <th>角色名</th>
                    <th>描述</th>
                    <th>是否启用</th>
                    <th>是否系统角色</th>
                    <th>是否部门角色</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <?php
                foreach ($items as $item) {
                    ?>
                    <tr>
                        <td><?= $item['name'] ?></td>
                        <td><?= $item['description'] ?></td>
                        <td>
                            <?php
                            if ($item['is_enabled'] == 1) {
                                ?>
                                <span class="label label-success">启用</span>
                                <?php
                            } else {
                                ?>
                                <span class="label label-danger">禁用</span>
                                <?php
                            }
                            ?>
                        </td>
                        <td>
                            <?php
                            if ($item['is_system'] == 1) {
                                ?>
                                <span class="label label-success">是</span>
                                <?php
                            } else {
                                ?>
                                <span>否</span>
                                <?php
                            }
                            ?>
                        </td>
                        <td>
                            <?php
                            if ($item['is_department'] == 1) {
                                ?>
                                <span class="label label-success">是</span>
                                <?php
                            } else {
                                ?>
                                <span>否</span>
                                <?php
                            }
                            ?>
                        </td>
                        <td>
                            <div class="btn-group">
                                <a class="btn btn-link" data-toggle="modal" data-role-id="<?= $item['id'] ?>" href="#detailModal">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <?php
                }
                ?>
                </tbody>
            </table>
        </div>
        <div class="pull-left">
            <?= \app\widgets\LinkPagerExt::widget(['pagination' => $pagination]) ?>
        </div>
    </div>
</div>

<div aria-hidden="true" role="dialog" tabindex="-1" id="detailModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">角色详情</h4>
            </div>
            <div class="modal-body" id="detailContent">
                正在加载数据....
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" id="btnDetailOk">确定</button>
            </div>
        </div>
    </div>
</div>

<div aria-hidden="true" role="dialog" tabindex="-1" id="addModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">新增角色</h4>
            </div>
            <div class="modal-body" id="roleSetContainer">
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" id="btnAddOk">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="application/javascript">
    (function () {
        $('#btnAddOk').click(function () {
            loading.show();
            var data = {};
            data.role_id = 0;
            data.name = $('#inputName').val();
            data.description = $('#inputDescription').val();
            data.is_enabled = $('#inputIsEnabled').val();
            var IsSystem = $('#inputIsSystem').is(":checked");
            var IsDepartment = $('#inputIsDepartment').is(":checked");
            if (IsSystem == true) {
                data.is_system = 1;
            } else {
                data.is_system = 0;
            }
            if (IsDepartment == true) {
                data.is_department = 1;
            } else {
                data.is_department = 0;
            }
            data.function_point = [];
            $("input:checkbox[name=function_point]:checked").each(function () {
                data.function_point.push($(this).val());
            });
            requestJson('set-role-handler', data, true, function (responseData) {
                $('#addModal').modal('hide');
                loading.hide();
                if (responseData.status == 0) {
                    window.location.reload();
                } else {
                    alert(responseData.message);
                }
            });
        });

        $('#btnDetailOk').click(function () {
            loading.show();
            var data = {};
            data.role_id = $('#role_id').val();
            data.name = $('#inputName').val();
            data.description = $('#inputDescription').val();
            data.is_enabled = $('#inputIsEnabled').val();
            var IsSystem = $('#inputIsSystem').is(":checked");
            var IsDepartment = $('#inputIsDepartment').is(":checked");
            if (IsSystem == true) {
                data.is_system = 1;
            } else {
                data.is_system = 0;
            }
            if (IsDepartment == true) {
                data.is_department = 1;
            } else {
                data.is_department = 0;
            }
            data.function_point = [];
            $("input:checkbox[name=function_point]:checked").each(function () {
                data.function_point.push($(this).val());
            });
            requestJson('set-role-handler', data, true, function (responseData) {
                $('#addModal').modal('hide');
                loading.hide();
                if (responseData.status == 0) {
                    window.location.reload();
                } else {
                    alert(responseData.message);
                }
            });
        });

        $('#addModal').on('show.bs.modal', function (e) {
            $("#roleSetContainer").html('正在加载数据....');
            requestHtml('role-set-partview', null, true, function (responseHtml) {
                $("#roleSetContainer").html(responseHtml);
            });
        });

        $('#detailModal').on('show.bs.modal', function (e) {
            $("#detailContent").html('正在加载数据....');
            var roleId = e.relatedTarget.attributes['data-role-id'].value;
            requestHtml('role-set-partview', {'role_id': roleId}, true, function (responseHtml) {
                $("#detailContent").html(responseHtml);
            });
        });
    })(jQuery);

    //设置模态窗:当用户点击模态框外部时不会关闭、当初始化时不显示模态框。
    $(function () {
        $('#addModal').modal({
            backdrop: 'static', show: false
        });

        $('#detailModal').modal({
            backdrop: 'static', show: false
        });
    });
</script>

